<template lang="html">
<div class="">
  <div class="search">
    <input type="text" name="" placeholder="点我搜索"> <mu-icon size="36" value="equalizer" color="white"></mu-icon>
  </div>
  <div class="banner">
    <mu-carousel :active="active"  hide-controls>
      <mu-icon value="arrow_back" slot="left"></mu-icon>
      <mu-icon value="arrow_forward" slot="right"></mu-icon>
      <template slot="indicator" slot-scope="{ index, active }">
        <mu-button icon class="mu-carousel-indicator-button" :class="{'mu-carousel-indicator-button__active': active}" @click="changeActive(index)">
          <span class="rect-indicator"></span>
        </mu-button>
      </template>
      <mu-carousel-item v-for="(i,index) in banners" :key="index">
        <img :src="i.picUrl">
      </mu-carousel-item>
    </mu-carousel>
  </div>
  <div class="but_icon">
    <div class="but_box">
      <div class="yuan"><mu-icon size="28" value="library_music" color="white" class="fm"></mu-icon></div>
      <p class="but_inf">私人FM</p>
    </div>
    <div class="but_box">
  <div class="yuan yleft"><mu-icon size="28" value="today" color="white" class="fm"></mu-icon></div>
      <p class="but_inf">每日推荐</p>
    </div>
    <div class="but_box">
      <div class="yuan"><mu-icon size="28" value="queue_music" color="white" class="fm"></mu-icon></div>
      <p class="but_inf">歌单</p>
    </div>
    <div class="but_box">
      <div class="yuan"><mu-icon size="28" value="view_week" color="white" class="fm"></mu-icon></div>
      <p class="but_inf">排行榜</p>
    </div>
  </div>
  <h3 class="nate">推荐歌单 &nbsp;></h3>
  <div class="nate_box">
    <div class="nate_content" v-for="(i,index) in tjdata" :key="index">
      <div class="nate_img">
        <img :src="i.picUrl" alt="">
      </div>
      <div class="nate_desc">
        <span>{{i.name}}</span>
      </div>
    </div>






  </div>
</div>
</template>

<script>

export default {
    name: 'finds',
    data () {
      return {
        msg:"",
        banners:[],
        active: 0,
        tjdata:[]
      }
    },
    methods:{
      changeActive (index) {
     this.active = index;
   }

    },
    mounted(){
      this.axios({
        url:this.HOST+"/banner",
        method:"post",
      }).then((res=>{
        let banners=res.data.banners
        this.banners=banners
      })).catch(function(err){
        console.log(err)
      })

      this.axios({
        url:this.HOST+"/personalized",
        method:"post"
      }).then((res=>{
        console.log("推荐歌单")
        console.log(res.data)
        let tjdatas=res.data.result.splice(15,29)
        this.tjdata=res.data.result
      })).catch(function(err){
        console.log(err)
      })

      this.axios({
        url:this.HOST+"/personalized/djprogram",
        method:"post"
      }).then((res=>{
        console.log("推荐音乐")
        console.log(res.data)
      }))
    }
}
</script>

<style lang="css">
.yleft{
  margin-left: 0.1rem;
}
.nate_img img{
  width: 101%;
}
.nate_desc{
    width: 100%;
}
.nate_img{
    width: 100%;
}
.nate_content{
    width: 29%;
    overflow: hidden;
    border:1px solid white;
    border-top-right-radius: 5px 5px;
    border-top-left-radius: 5px 5px;
    margin-bottom: 0.2rem;
}
.nate_box{
    width:100%;
    height: 5rem;
    overflow-y:scroll;
    display:flex;
    justify-content: space-around;
    font-size:0.2rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}
.nate{
  line-height: 0.1rem;
  font-size: 0.3rem;
  margin-left: 0.2rem;
  margin-top: 0.3rem;
}
body{
  background: #FDFDFD;
}
.fm{
  line-height: 46px;
}
.but_box p{
  display: block;
  margin-top: 0.1rem;
  font-size: 0.3rem;
}
.but_icon{
  width: 100%;
  height: 1.8rem;
  background: #FDFDFD;
  display: flex;
  padding-top: 0.2rem;
  justify-content: space-around;
  border-bottom: 1px solid #F1F0F0;
}
.yuan{
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #EF563E;
}
.but_box{
  text-align: center;
}
.search{
  width: 100%;
  background: #E1645D;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search input {
  margin-left: 1.5rem;
  border-radius: 17px;
  border: 1px solid #E1645D;
  color: #F48981;
  background: #FAFAFA;
  width: 4rem;
  height: .5rem;
  font-size: .25rem;
  text-align: center;
}
.banner{
  width: 100%;
  height: 3rem;
}
.banner .mu-carousel{
  height: 3rem;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.banner img{
  width: 100%;
}
</style>
